<script setup>
    import { computed, ref, watchEffect } from "vue";

    // 定义响应式数据
    const flag = ref(null);

    // 用来接收父组件传入的prop
    const props = defineProps({
        checked:{
            type: Boolean,
            default: false
        },
        id:{},
        title:{}
    })

    // 声明父组件绑定的自定义事件
    const emits = defineEmits(["change"])

    // 创建方法
    function send(eve){
        flag.value = !flag.value;
        emits("change", props.id, flag.value, eve);
    }

    // 创建计算属性
    const color = computed(()=>{
        return flag.value ? "red" : "#ccc";
    })

    // 开启侦听器
    watchEffect(()=>{
        flag.value = props.checked;
    })
</script>

<template>
    <div class="checkBox" :index="id" @click="send">
        <div class="box">
            <span :style="{background:color}"></span>
            <span :style="{background:color}"></span>
        </div>
        {{title}}
    </div>
</template>

<style>
    .checkBox{height:20px;cursor: pointer;display: inline-block;}
    .box{position: relative;width:20px;height:15px;display: inline-block;}
    .checkBox span{position: absolute;width:10px;height:20px;background: #ccc;border-radius: 5px 5px 0px 0px;}
    .checkBox span:nth-child(1){transform: rotate(-45deg);}
    .checkBox span:nth-child(2){transform: translateX(7px) rotate(45deg);}
</style>